React + TypeScript: Using Inline Styles Correctly

您所在的位置：网站首页 › react typescript layout styled › React + TypeScript: Using Inline Styles Correctly

React + TypeScript: Using Inline Styles Correctly

#React + TypeScript: Using Inline Styles Correctly| 来源: 网络整理| 查看: 265

When using inline styles in a React project that is written in TypeScript, you may encounter some annoying problems.

For example, the code below:

// App.tsx // Kindacode.com import React from "react"; const App: React.FunctionComponent = () => { return ; }; const styles = { container: { fontWeight: "bold", }, }; export default App;

will result in an error like this:

/Users/goodman/Desktop/Test/react_ts_kindacode/src/App.tsx TypeScript error in /Users/goodman/Desktop/Test/react_ts_kindacode/src/App.tsx(5,15): Type '{ fontWeight: string; }' is not assignable to type 'Properties'. Types of property 'fontWeight' are incompatible. Type 'string' is not assignable to type 'FontWeight | undefined'. TS2322 3 | import React from "react"; 4 | const App: React.FunctionComponent = () => { > 5 | return ; | ^ 6 | }; 7 | 8 | const styles = {

Similar errors can also occur with some common properties like flexDirection, position, etc.

Table Of Contents 1 Solutions 1.1 1. Casting styles as const 1.2 2. Using { [key: string]: React.CSSProperties } 1.3 3. Casting each child of styles as React.CSSProperties 2 Conclusion Solutions

We have more than one solution to get rid of the above issue.

1. Casting styles as const // App.tsx import React from "react"; const App: React.FunctionComponent = () => { return ( Kindacode.com ); }; const styles = { container: { width: 300, height: 300, margin: '50px auto', backgroundColor: "orange", display: "flex", flexDirection: "column", justifyContent: 'center', alignItems: 'center', fontWeight: "bold", }, } as const; export default App;

Screenshot:

2. Using { [key: string]: React.CSSProperties }

You can modify the code of the first solution as this:

const styles: { [key: string]: React.CSSProperties } = { container: { width: 300, height: 300, margin: "50px auto", backgroundColor: "orange", display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", fontWeight: "bold", }, }; 3. Casting each child of styles as React.CSSProperties

You can change the code in the first solution to this:

const styles = { container: { width: 300, height: 300, margin: "50px auto", backgroundColor: "orange", display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", fontWeight: "bold", } as React.CSSProperties, }; Conclusion

We’ve gone through a few approaches to make TypeScript happy and stop warning when using inline styles. If you would like to explore more about modern React and TypeScript, take a look at the following:

React + TypeScript: Create an Autosize Textarea from scratch React + TypeScript: Handling Select onChange Event React + TypeScript: Handling onFocus and onBlur events React & TypeScript: Using useRef hook example React + TypeScript: Drag and Drop Example React + TypeScript: Using setTimeout() with Hooks React + TypeScript: setInterval() example (with hooks)

You can also check our React category page and React Native category page for the latest tutorials and examples.

Share Tweet Telegram Subscribe 0 Comments Inline Feedbacks View all comments